<template>
    <el-drawer
      title="证书信息"
      direction="rtl"
      @close="clickReturns"
      ref="drawer"
      size="42%"
      :visible.sync="visible">
      <div class="mod-config">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="item.profession" :name="item.randomNum" v-for="item in editableTabs" :key="item.randomNum">
            <certificate-details ref="child" :dataForm="item" @refreshDataList="initJobs"></certificate-details>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
</template>

<script>
  import CertificateDetails from './certificate-details'
  export default {
    props: {
      flag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        visible: false,
        activeName: 'threejob',
        editableTabs: [],
        index:0,
        id:'',
        fixActiveName: false
      }
    },
    components: {
      CertificateDetails
    },
    methods: {
      init(id){
        this.visible = true
        this.id = id
        this.initJobs()
      },
      getDataList(){
        this.fixActiveName = true
        this.initJobs()
      },
      initJobs() {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsById'),
          method: 'get',
          params: this.$http.adornParams({
                  'id': this.id,
                  'status': this.flag? 'crash':''
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.editableTabs = data
            if(!this.fixActiveName){
              setTimeout(() => {
                this.activeName = data[0].randomNum
            });
            }
          }
        })
      },
      clickReturns() {
        // this.$parent.getDataList()
      }
     }
  }
</script>

<style lang="scss">
    .el-card__body {
      padding: 10px 10px;
    }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .queryForm{
      margin-top: 10px;
    }
    .queryForm .el-form-item{
      margin-bottom: 0px;
    }
    .el-button--danger {
      color: #f56c6c;
      background-color: #fff;
      border-color: #f56c6c;
    }
</style>
